<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="../../subassembly/common/jquery-3.5.1.min.js"></script>
  <script src="../../subassembly/threeJs/three.js"></script>
  <style type="text/css">
    #three-topo {
      width: 800px;
      height: 800px;
    }
  </style>
</head>
<body>
<article>
  <div id="three-topo"></div>
</article>
<script>
  var scene, camera, renderer;

  draw();

  function draw() {
    var container  = document.getElementById("three-topo");
    scene = new THREE.Scene();
    // 创建了焦距接近人眼(50mm)，画幅比为屏幕宽高比
    camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight);

    // 设定相机的位置和拍摄方位,把相机放在空间(3,4,5)的位置，然后俯视空间中的原点(0,0,0)
    camera.position.set(3,4,5);
    camera.lookAt(new THREE.Vector3(0,0,0));
    scene.add(camera);

    // 创建立方体
    var geometry = new THREE.BoxGeometry(1,1,1);   //创建边长为1的立方体;
    var material = new THREE.MeshNormalMaterial(); //创建一种法向材质;
    var cube = new THREE.Mesh(geometry, material); //将材质赋予给立方体;

    scene.add(cube);

    // 创建渲染器
    // antialias抗锯齿开启
    renderer = new THREE.WebGLRenderer({ alpha: true, antialias: true });
    renderer.setSize(window.innerWidth, window.innerHeight);
    container.appendChild(renderer.domElement)
    renderer.render(scene, camera);
  }

</script>
</body>
</html>
